<template>
  <div :style="`width: 100%; height: 99vh; background: url('/8.gif') no-repeat center center; background-size: cover;`" class="container">
    <dv-border-box11 title="历史记录查看" :title-width="400" :animate="false">
      <button @click="goBack" class="back-button">返回大屏</button>
      
      <!-- 切换视图按钮 -->
      <div class="view-toggle">
        <button 
          :class="['toggle-btn', { active: currentView === 'camera' }]"
          @click="currentView = 'camera'"
        >
          摄像头截图
        </button>
        <button 
          :class="['toggle-btn', { active: currentView === 'sensor' }]"
          @click="currentView = 'sensor'"
        >
          传感器数据
        </button>
      </div>

      <!-- 摄像头截图视图 -->
      <div v-if="currentView === 'camera'" class="columns">
        <!-- 左侧列 -->
        <div class="left-column">
          <HistoryRecard @select-image="handleSelectImage" />
        </div>
        <!-- 右侧列 -->
        <div class="right-column">
          <ImageViewer :currentImage="selectedImage" />
        </div>
      </div>

      <!-- 传感器数据视图 -->
      <div v-if="currentView === 'sensor'" class="sensor-view">
        <SensorHistoryTable />
      </div>
    </dv-border-box11>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';  // 引入 Vue Router
import { BorderBox11 as DvBorderBox11, BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3';
import HistoryRecard from "@/components/HistoryRecard.vue";
import ImageViewer from "@/components/ImageViewer.vue";
import SensorHistoryTable from "@/components/SensorHistoryTable.vue";

// 定义 selectedImage 状态
const selectedImage = ref(null);

// 当前视图：'camera' 或 'sensor'
const currentView = ref('camera');

// 获取 Vue Router 实例
const router = useRouter();

// 处理子组件传递的选中图片事件
const handleSelectImage = (image) => {
  selectedImage.value = image;
};

// 返回到大屏路径
const goBack = () => {
  router.push('/view');  // 跳转到 /view 路径
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 包裹列的父容器 */
.columns {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

/* 左侧列样式 */
.left-column {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5vw;
  margin-left: 1vw;
  margin-bottom: 1vw;
  background-color: rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 启用垂直滚动 */
  max-height: 90vh; /* 限制最大高度，防止溢出 */
  position: relative; /* 使得按钮可以相对于左侧列定位 */
}

/* 右侧列样式 */
.right-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5vw;
  margin-right: 2vw;
  margin-bottom: 1vw;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 传感器数据视图 */
.sensor-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2vw;
}

/* 返回按钮样式 */
.back-button {
  position: absolute; /* 定位到左上角 */
  top: 2vw;
  left: 2vw;
  padding: 10px 20px;
  background-color: #3480ee;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 100;
}

.back-button:hover {
  background-color: #1993c7;
}

/* 视图切换按钮容器 */
.view-toggle {
  position: absolute;
  top: 2vw;
  right: 2vw;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.toggle-btn {
  padding: 10px 20px;
  background-color: #263344;
  color: #7aa3e0;
  border: 1px solid #3480ee;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background-color: #3480ee;
  color: #fff;
  transform: translateY(-2px);
}

.toggle-btn.active {
  background-color: #2990ff;
  color: #fff;
  border-color: #2990ff;
}
</style>
